<template>
	<view style="margin-top: 20rpx;">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#57606F"
		 class="header">
		</uni-segmented-control>
		<view class="content">
			<view v-if="current === 0">
				<view class="item" v-for="item in data" :key="item.id">
					<view class="left">
						<checkbox />
					</view>
					<view class="right">
						<view class="line1">
							<span class="circle"></span>
							<span style="font-size: 15rpx;">{{item.status}}</span>
						</view>
						<view class="line2">
							<span style="">{{item.name}}</span>
							<span style="font-weight: 600;" class="fr">{{item.money}}</span>
						</view>
						<view class="line3">
							<span style="margin-right: 30rpx;">{{item.type}}</span>
							<span style="">{{item.id}}</span>
							<span class="noConfirm fr">{{item.noConfirm}}</span>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				委屈
			</view>
		</view>
		<view class="bottom">
			<view class="bottomLeft">
				<span><checkbox/>全选</span>
			</view>
			<view class="bottomRight">
				<button>确认(0)</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				items: ['全部单据', '未确认单据'],
				current: 0,
				data: [{
					status:'已完成',
					name:'测试123123',
					type:'借款单2020',
					id:'j200000002',
					money:'￥1,000,00',
					noConfirm:'未确认',
				},{
					status:'已完成',
					name:'测试123',
					type:'申请单2020',
					id:'j200000003',
					money:'￥803,00',
					noConfirm:'未确认',
				},{
					status:'已完成',
					name:'322',
					type:'申请单2020',
					id:'j200000004',
					money:'￥1,234,00',
					noConfirm:'未确认',
				}]
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: white;
	}
	.header {
		margin: 0 auto;
		width: 80%;
	}

	.circle {
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #1D89E4;
		margin-right: 10rpx;
	}

	.left {
		font-size:45rpx;
		height: 200rpx;
		line-height: 200rpx;
		vertical-align: middle;
		width: 80rpx;
		display: inline-block;
		text-align: center;
	}

	.right {
		display: inline-block;
		flex: 1;
	}

	.content {
	}

	.line1 {
		margin-top: 30rpx;
	}

	.line2 {
		margin-top: 20rpx;
	}

	.line3 {
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: 200;
		color: gray;
	}

	.item {
		margin-top: 40rpx;
		height: 200rpx;
		display: flex;
		padding-right: 40rpx;
	}

	.fr {
		float: right;
	}

	.noConfirm {
		background-color: #FEF4EA;
		color: #F3901F;
		padding: 10rpx;
		font-size: 20rpx;
	}

	.uni-checkbox-input {
		border-radius: 50% !important;
	}
	.bottom{
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 100rpx;
	}
	.bottomLeft{
		margin-left: 40rpx;
		font-size: 40rpx;
	}
  .bottomRight uni-button{
		position: absolute;
		top: -20rpx;
		right: 10rpx;
		background-color:#32B6C5;
		color: white;
	}
</style>
